<template>
  <div class="flex-column" style="padding: 0px 0px 0 17px">
    <div v-for="item in data.courseTypeList">
      <div style="padding: 12px 0 8px 0;color: #171920">
        <span class="theme-hover font-small" style="font-size: 14px;font-weight: 700;line-height: 1"
              @click="selectHandle(item.id)">{{ item.name }}</span>
      </div>
      <div class="flex-start-center " style="flex-flow: row wrap;color: #686a71">
        <span v-for="unit in item.children" class="theme-hover"
              style="padding: 0px 9px 0px 0; font-size: 12px;line-height: 21px"
              @click="selectHandle(unit.parentId)">{{ unit.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, reactive, watch} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();
const emits = defineEmits(['selectHandle']) // 语法糖
const props = defineProps({
  courseTypeList: {
    type: Array,
    default: []
  },
});
const data = reactive({
  courseTypeList: []
});
function selectHandle(id) {
  emits('selectHandle',id)
}
watch(()=>props.courseTypeList,(val)=>{
  data.courseTypeList = val
})
</script>
